<template>
  <div id="app" class="outer-background">
    <div class="card-container">
      <!-- 光伏部分 -->
      <div class="data-item" :style="{ top: '160px', left: '320px' }">
        <span>{{ data.dayPower }}</span>
      </div>
      <div class="data-item" :style="{ top: '181px', left: '312px' }">
        <span>{{ data.totalPower }}</span>
      </div>
      <div class="data-item" :style="{ top: '575px', left: '250px' }">
        <span>{{ data.positiveEnergy }}</span>
      </div>
      <div class="data-item" :style="{ top: '600px', left: '250px' }">
        <span>{{ data.reverseEnergy }}</span>
      </div>
      <div class="data-item" :style="{ top: '621px', left: '257px' }">
        <span>{{ data.forwardPower }}</span>
      </div>

      <!-- 开关柜部分 -->
      <div class="data-item"
           :style="{ top: '179px', left: '1105px', color: data.switch1Voltage === 0 ? 'gray' : '#0070ff' }">
       <span :style="{ color: getSwitchStatusColor(data.switch1Status) }">
          {{ getSwitchStatusText(data.switch1Status) }}
        </span>
      </div>
      <div class="data-item"
           :style="{ top: '162px', left: '1173px', color: data.switch1Voltage === 0 ? 'gray' : '#0070ff' }">
        <span>{{ data.switch1Voltage }}</span>
      </div>
      <div class="data-item"
           :style="{ top: '202px', left: '1173px', color: data.switch1Current === 0 ? 'gray' : '#0070ff' }">
        <span>{{ data.switch1Current }}</span>
      </div>

      <div class="data-item"
           :style="{ top: '345px', left: '1105px', color: data.switch2Voltage === 0 ? 'gray' : '#0070ff' }">
          <span :style="{ color: getSwitchStatusColor(data.switch2Status) }">
          {{ getSwitchStatusText(data.switch2Status) }}
        </span>
      </div>
      <div class="data-item"
           :style="{ top: '330px', left: '1173px', color: data.switch2Voltage === 0 ? 'gray' : '#0070ff' }">
        <span>{{ data.switch2Voltage }}</span>
      </div>
      <div class="data-item"
           :style="{ top: '367px', left: '1173px', color: data.switch2Current === 0 ? 'gray' : '#0070ff' }">
        <span>{{ data.switch2Current }}</span>
      </div>

      <div class="data-item"
           :style="{ top: '512px', left: '1105px', color: data.switch3Voltage === 0 ? 'gray' : '#0070ff' }">
    <span :style="{ color: getSwitchStatusColor(data.switch3Status) }">
          {{ getSwitchStatusText(data.switch3Status) }}
        </span>      </div>
      <div class="data-item"
           :style="{ top: '498px', left: '1173px', color: data.switch3Voltage === 0 ? 'gray' : '#0070ff' }">
        <span>{{ data.switch3Voltage }}</span>
      </div>
      <div class="data-item"
           :style="{ top: '542px', left: '1173px', color: data.switch3Current === 0 ? 'gray' : '#0070ff' }">
        <span>{{ data.switch3Current }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DataScreen",
  data() {
    return {
      data: {
        dayPower: 248,
        totalPower: 25746,
        positiveEnergy: 1125.7,
        reverseEnergy: 2248.5,
        forwardPower: 54.6,
        switch1Voltage: 248,
        switch1Current: 248,
        switch1Status: "0",
        switch2Voltage: 248,
        switch2Current: 248,
        switch2Status: "1",
        switch3Voltage: 0,
        switch3Current: 0,
        switch3Status: "1",

      }
    };
  },
  methods: {
    getSwitchStatusText(status) {
      return status === "1" ? "合闸" : "分闸";
    },
    getSwitchStatusColor(status) {
      return status === "1" ? '#0070ff' : '#ff6633'; // 湖蓝色 / 橙红色
    }
  }
};
</script>
<style scoped>
@import '../assets/css/font.css';
@import '../assets/css/data-screen.css';
</style>
